<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed 的get 与 set </title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
       {{fullName}}
    </div>
    
    <script>
        //原生
       // var dom = document.getById('app');
       // dom.innerHtml = 'hello word';
       var vm = new Vue({
           el:"#app",
           data:{
               firstName:'hello word',
               lastName:'tom',               
           },
          
           //计算属性  内置缓存的  改变时会计算
           computed: {
                 fullName: {
                     get: function(){
                         return this.firstName + "" + this.lastName
                     },
                     set: function( value ){
                         var arr = value.split("");
                         this.firstName = arr[0];
                         this.lastName  = arr[1];
                     }
                 }
             }
       });
       
    </script>
</body>
</html>